<template>
<el-card class="page-container">
        <template #header>
            <div class="header">
                <span><strong>历史运动会</strong></span>
            </div>
        </template>
        <el-form inline>
            <el-form-item>
               <strong>当前学期:20232</strong>
                <el-button type="primary"@click="show" style="margin-left: 900px">
                        发布运动会
                </el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table  v-loading="loading"
                element-loading-text="Loading..."
                :element-loading-spinner="svg"
                element-loading-svg-view-box="-10, -10, 50, 50"
                :data="yearPage" style="width: 100%">
                <el-table-column type="index" width="80" label="序号"/>
            <el-table-column label="学期" prop="yearTermID"width="100px"></el-table-column>
            <el-table-column label="届数"show-overflow-tooltip>
                <template #default="{ row }">
                    <strong>第{{row.id}}届运动会</strong>
                </template>
            </el-table-column>
            <el-table-column label="运动会开始时间" prop="beginDate"show-overflow-tooltip></el-table-column>
            <el-table-column label="运动会结束时间" prop="endDate"show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary" @click=showDialog(row)></el-button>
                    <el-button :icon="Delete" circle plain type="danger" @click=deletStudentByID(row)></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="未查找到数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[6, 8 ,10]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
    </el-card>
<el-dialog v-model="dialogVisible" :title="title" width="50%">
    <el-form :model="sportsYear" :rules="rules" label-width="100px" style="padding-right: 30px">
        <el-form-item label="学期" prop="yearTermID">
            <el-input v-model="sportsYear.yearTermID" minlength="1" maxlength="15" disabled></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
                <el-date-picker 
                v-model="sportsYear.beginDate"
                type="date"
                placeholder="Pick a day"
                value-format="YYYY-MM-DD"
                :size="size"/>
        </el-form-item>
        <el-form-item label="结束时间">
                <el-date-picker 
                v-model="sportsYear.endDate"
                type="date"
                placeholder="Pick a day"
                value-format="YYYY-MM-DD"
                :size="size"/>
        </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addYear()"> 保存 </el-button>
        </span>
    </template>
</el-dialog>
</template>
<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'
import { ref,onMounted } from 'vue'
import {getPageService,add} from'@/api/adm/adm.js'
//导入消息框
import {ElMessage,ElMessageBox} from 'element-plus'
//分页条数据模型
const currentPage = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(5)//每页条数
const loading = ref(true)
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    getPage()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    currentPage.value = num
    getPage()
}
const yearPage=ref()
const getPage=async()=>{
    const model={
        currentPage: currentPage.value?currentPage.value:1,
        pageSize: pageSize.value?pageSize.value:1,
        keyword:''
    }
    let result=await getPageService(model)
    yearPage.value=result.data.records
    loading.value=false
    total.value=result.data.total
}
onMounted(
    ()=>{
        getPage()
    }
)
const dialogVisible=ref(false)
const title=ref("添加运动会")
const sportsYear=ref({
    yearTermID:'20241',
    beginDate:'',
    endDate:''
})
const addYear=async()=>{
    let result=await add(sportsYear.value)
    ElMessage.success(result.data? result.data:'修改成功')
    dialogVisible.value=false;
}
const show=()=>{
    dialogVisible.value=true;
}
</script>
<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>